<script setup>
import SearchBox from '@/components/SearchBox.vue'
import occupation_item from './components/occupation_item.vue'
import { ref, computed, reactive } from 'vue'

const recommend_radio = ref('default')
const companyList = reactive(['东莞', '全国', '北京', '上海', '广州'])
const industryList = reactive([
  '不限',
  '电子商务',
  '游戏',
  '社交网络与媒体',
  '广告营销'
])
const financingList = reactive(['不限', '未融资', '天使轮', 'A轮', 'B轮'])
const scaleList = reactive([
  '不限',
  '0-20人',
  '20-99人',
  '100-499人',
  '500-999人',
  '1000-9999人',
  '10000人以上'
])

const head_data = computed(() => {
  return [
    { label: '公司地点', data: [...companyList] },
    { label: '行业类型', data: [...industryList] },
    { label: '融资阶段', data: [...financingList] },
    { label: '公司规模', data: [...scaleList] }
  ]
})
//底部
const activeFooter = ref('occupation')
const occupationList = reactive([
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘',
  '东莞客服经理招聘'
])
const hot_cityList = reactive([
  '北京招聘',
  '北京招聘',
  '北京招聘',
  '北京招聘',
  '石家庄招聘',
  '北京招聘'
])
const enterpriseList = reactive([
  '华为',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动',
  '顺丰速运',
  '字节跳动'
])
const nearbyList = reactive([
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息',
  '北京招聘信息'
])
</script>

<template>
  <div class="center">
    <el-affix :offset="20">
      <el-card class="cardStyle">
        <el-row>
          <el-col :span="24"><SearchBox></SearchBox></el-col>
        </el-row>
        <el-row
          v-for="(item, index) in head_data"
          :key="index"
          style="margin-top: 20px"
        >
          <el-col :span="24">
            <el-space wrap>
              <el-button link disabled
                ><span style="color: #000">{{ item.label }}:</span></el-button
              >
              <el-button
                v-for="(dataitem, i) in item.data"
                :key="i"
                link
                class="active_btn"
              >
                <span :class="{ activespan: i === 0 }">{{ dataitem }}</span>
              </el-button>
            </el-space>
          </el-col>
        </el-row>
      </el-card>
    </el-affix>
    <div class="radio_Bar">
      <el-radio-group v-model="recommend_radio" size="large">
        <el-radio-button label="默认推荐" value="default" />
        <el-radio-button label="Java" value="Java" />
      </el-radio-group>
    </div>
    <div style="margin: 20px 50px; width: 1200px">
      <!-- <el-space wrap>
        <occupation_item></occupation_item>
        <occupation_item></occupation_item>
        <occupation_item></occupation_item>
        <occupation_item></occupation_item>
      </el-space> -->
      <el-row gutter="20">
        <el-col :span="6" style="margin-bottom: 20px"
          ><occupation_item></occupation_item
        ></el-col>
        <el-col :span="6" style="margin-bottom: 20px"
          ><occupation_item></occupation_item
        ></el-col>
        <el-col :span="6" style="margin-bottom: 20px"
          ><occupation_item></occupation_item
        ></el-col>
        <el-col :span="6" style="margin-bottom: 20px"
          ><occupation_item></occupation_item
        ></el-col>
        <el-col :span="6" style="margin-bottom: 20px"
          ><occupation_item></occupation_item
        ></el-col>
      </el-row>
      <div style="margin: auto; width: 100%">
        <el-pagination
          style="margin: 0 auto; width: 500px"
          background
          layout="prev, pager, next"
          :total="1000"
          page-size="20"
        />
      </div>
      <el-card style="margin-top: 20px" shadow="never">
        <el-tabs
          v-model="activeFooter"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <el-tab-pane label="热门职业" name="occupation">
            <el-row>
              <div style="padding: 0px">
                <el-space wrap>
                  <el-button
                    v-for="(item, index) in occupationList"
                    :key="index"
                    link
                    color="#00bebd"
                    class="active_btn"
                  >
                    {{ item }}
                  </el-button>
                </el-space>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="热门城市" name="hot_city">
            <el-row>
              <div style="padding: 0px">
                <el-space wrap>
                  <el-button
                    v-for="(item, index) in hot_cityList"
                    :key="index"
                    link
                    color="#00bebd"
                    class="active_btn"
                  >
                    {{ item }}
                  </el-button>
                </el-space>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="热门企业" name="enterprise">
            <el-row>
              <div style="padding: 0px">
                <el-space wrap>
                  <el-button
                    v-for="(item, index) in enterpriseList"
                    :key="index"
                    link
                    color="#00bebd"
                    class="active_btn"
                  >
                    {{ item }}
                  </el-button>
                </el-space>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="附近城市" name="nearby">
            <el-row>
              <div style="padding: 0px">
                <el-space wrap>
                  <el-button
                    v-for="(item, index) in nearbyList"
                    :key="index"
                    link
                    color="#00bebd"
                    class="active_btn"
                  >
                    {{ item }}
                  </el-button>
                </el-space>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.center {
  // text-align: center;
  margin: auto;

  .cardStyle {
    margin: 20px 50px;
  }

  span {
    font-size: 16px;
    color: #000;
  }

  .activespan {
    color: #409eff;
    font-weight: bold;
  }

  .active_btn {
    :hover {
      color: #409eff;
    }
  }

  .radio_Bar {
    margin: 20px 50px;
  }
}
</style>
